<template>
  <view>
    <u-sticky bgColor="#fff">
      <Tabs
        v-if="!isSearch"
        :list="tabList"
        @click="handleTab"
        :current="currentTab"
        search
        @search="openSearch"
      />
      <u-input
        v-else
        v-model="searchText"
        placeholder="搜索你需要的内容"
        suffix-icon="search"
        clearable
        suffix-icon-style="color: #909399"
        shape="circle"
        border="none"
        font-size="13px"
        @clear="handleClear"
        :custom-style="{
          background: '#FBFBFB',
          padding: '10px',
          boxShadow: '0 0 20rpx rgba(186, 186, 186, 0.1)',
        }"
      >
        <template slot="suffix">
          <u-button @click="handleClear" text="关闭" color="#cbcbcb" size="mini" />
        </template>
      </u-input>
    </u-sticky>
    <swiper style="height: calc(100vh - 88rpx)" :current="currentTab" @change="changeTab">
      <swiper-item>
        <scroll-view
          scroll-y
          style="height: calc(100vh - 88rpx)"
          @scrolltolower="handleScroll"
        >
          <Entertainment
            :type="tabList[currentTab].child"
            :page="page"
            :search="searchText"
            :index="currentTab"
            @changePage="changePage"
            @dataTotal="dataTotal"
          />
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view
          scroll-y
          style="height: calc(100vh - 88rpx)"
          @scrolltolower="handleScroll"
        >
          <Theme-activity
            :type="tabList[currentTab].child"
            :page="page"
            :search="searchText"
            :index="currentTab"
            @dataTotal="dataTotal"
          />
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import Tabs from "@/components/Tabs/index";
import Entertainment from "@/pages/home/cp/Entertainment";
import ThemeActivity from "@/pages/home/cp/ThemeActivity";

import { homeActivityType } from "@/request/homeApi.js";
export default {
  components: { Tabs, Entertainment, ThemeActivity },
  data() {
    return {
      isSearch: false, // 是否显示搜索
      searchText: "", // 搜索内容
      currentTab: 0,
      tabList: [], // 菜单
      total: 0, // 总数
      pageNum: 0, // 分页数
      page: 1, // 页数
    };
  },
  created() {
    this.getType();
  },
  onShow() {
    const TEMP = this.page;
    this.page = 0;
    setTimeout(() => {
      this.page = TEMP;
    }, 0);
  },
  methods: {
    // 切换菜单
    handleTab(v) {
      this.currentTab = v.index;
    },
    // 触底加载
    handleScroll(e) {
      if (this.total <= this.pageNum) return;
      this.page++;
    },
    // 切换tab
    changeTab(e) {
      this.currentTab = e.target.current;
      this.page = 1;
      uni.pageScrollTo(); // 滚动到顶部
    },
    // 初始化页面
    changePage() {
      this.page = 1;
      this.pageNum = 0;
    },
    // 打开搜索
    openSearch() {
      this.isSearch = true;
    },
    // 清空搜索
    handleClear() {
      this.isSearch = false;
      this.searchText = "";
    },
    // 获取活动类型
    getType() {
      homeActivityType().then((res) => {
        if (res.code == 1) {
          res.data.forEach((i) => {
            i.child.unshift({
              id: "",
              name: "全部",
              status_text: "",
            });
          });
          this.tabList = res.data;
        }
      });
    },
    // 获取数据数量
    dataTotal(v) {
      if (this.currentTab == v.index) {
        this.total = v.total;
        this.pageNum = v.dataNum;
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
